/*
 * Copyright Thoughtworks, Inc.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
@use "sass:map";

$icon-hover-color: #1c435c;
$dashboard-tab-bg: #fff;
$dashboard-tab-name: #1c435c;
$dashboard-tab-name-current: $go-primary;
$tab-name-current-border: $go-primary;
$dashboard-arrow-color: $icon-color;
$dashboard-tab-height: 40px;
$dashboard-add-tab-width: 40px;
$dashboard-tab-list-toggle-width: $dashboard-add-tab-width;
$dashboard-tabs-padding: 30px;
$dashboard-tabs-border-color: #d6e0e2;
$dashboard-tabs-border-radius: 0;
$dashboard-tabs-pager-width: $dashboard-add-tab-width;
$dashboard-tab-current-marker-height: 10px;
$dashboard-tabs-box-shadow: 0 0 10px rgb(0, 0, 0, 21%);

@keyframes candystripe {
  100% {
    background-position: -100px 0;
  }
}

%tab-buttons {
  padding: 0;
  width: $dashboard-add-tab-width;
  text-align: center;
  flex-grow: 0;
  flex-shrink: 0;
  font-size: 14px;
  border-left: 1px solid $dashboard-tabs-border-color;
  border-right: 1px solid $dashboard-tabs-border-color;
  cursor: pointer;
  height: $dashboard-tab-height;

  &:active,
  &:focus {
    outline: 0;
  }
}

.dashboard-tabs {
  @include unselectable;

  position: fixed;
  z-index: 6;
  top: 40px;
  left: 0;
  right: 0;
  display: flex;
  background-color: $dashboard-tab-bg;
  border-radius: $dashboard-tabs-border-radius;
  line-height: $dashboard-tab-height;
  height: $dashboard-tab-height;
  padding: 0 $dashboard-tabs-padding;
  margin-bottom: 20px;
  box-shadow: $dashboard-tabs-box-shadow;

  &.loading {
    &::after {
      @include animation(candystripe 1s linear infinite);

      display: inline-block;
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      top: 100%;
      height: 5px;
      z-index: 9;
      background-size: 35px 20px, 100% 100%, 100% 100%;
      background-color: #4ad9d9;
      background-image:
        linear-gradient(
          -45deg,
          transparent 33%,
          rgb(255, 255, 255, 30%) 33%,
          rgb(255, 255, 255, 30%) 66%,
          transparent 66%
        );
    }
  }
}

.dashboard-tabs-sortable,
.dashboard-tabs-scrollable {
  vertical-align: top;
  white-space: nowrap;
}

.dashboard-tabs-sortable {
  overflow: auto hidden;
  outline: none;
  padding-bottom: 100px;
}

.dashboard-tabs-scrollable {
  height: $dashboard-tab-height;
  overflow: hidden; // ensure scrollbars of inner container are hidden from view
  display: flex;

  &.paged {
    .page-prev,
    .page-next {
      display: block;
      box-shadow: 0 0 10px rgb(0, 0, 0, 21%);
    }
  }
}

button {
  border-radius: 0;
}

.add-tab {
  @extend %tab-buttons;

  margin: 0 0 0 -1px;
  font-size: 16px;
  color: $dashboard-tab-name-current;
}

.edit-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 9;
  background: $dashboard-tab-bg;
  color: $icon-color;
  border-radius: 3px;
  font-weight: normal;
  line-height: initial;
  box-shadow: $dashboard-tabs-box-shadow;
}

.dashboard-tab-action {
  display: inline-block;
  margin: 0;
  padding: 5px 15px;
  border-radius: $dashboard-tabs-border-radius;

  &:first-of-type {
    border-right: 1px solid $dashboard-tabs-border-color;
  }
}

.deny-action {
  color: #aaa;
  border-color: #aaa;
  cursor: not-allowed;
}

.page-prev,
.page-next {
  @extend %tab-buttons;

  color: $dashboard-arrow-color;
  display: none;
}

.page-prev {
  margin-right: -1px;
}

.page-next {
  margin-left: -1px;
}

.dashboard-tab {
  display: inline-block;
  border-right: 1px solid $dashboard-tabs-border-color;
  padding: 0 10px;
  font-weight: 600;
  cursor: pointer;
  position: relative;
  white-space: nowrap;
  height: $dashboard-tab-height;
  outline: none;

  &:active,
  &:focus {
    outline: none;
  }

  &:first-of-type {
    margin-left: 0;
    border-left: 1px solid $dashboard-tabs-border-color;
  }

  > * {
    vertical-align: top;
  }

  &.draggable-source--is-dragging {
    @include sort-cursor-active;

    &::after {
      display: none;
    }

    > * {
      visibility: hidden;
    }
  }

  &.draggable-mirror {
    background: $dashboard-tab-bg;
    line-height: $dashboard-tab-height;
    border: 0;
    box-shadow: 0 0 10px rgb(255, 255, 255, 21%);
    z-index: 5;
  }
}

.edit-tab {
  margin: 7px 0 10px 10px;
  font-size: 14px;
}

.tab-name {
  @include truncate-to-width($max: 210px);

  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  margin: 0 0 0 10px;
  display: inline-block;
  color: $dashboard-tab-name;
}

.current {
  cursor: default;
  border-bottom: 3px solid $tab-name-current-border;

  .tab-name {
    color: $dashboard-tab-name-current;
    margin-right: 0;
  }
}

.tab-dropdown-toggle {
  display: inline-block;
  margin-left: 7px;
  cursor: default;
}

.actionable-message {
  position: absolute;
  top: calc(100% + #{$dashboard-tab-current-marker-height});
  left: 30px;
  padding: 20px 50px 20px 20px;
  border: 0;
  border-radius: $global-border-radius;
  background: #fff;
  color: #333;
  z-index: 25;
  box-shadow: $dashboard-tabs-box-shadow;
  line-height: initial;

  > * {
    vertical-align: middle;
  }

  .button {
    margin: 0;
    margin-left: 10px;
    font-size: inherit;
    padding: 5px 10px;
  }

  .btn-link {
    padding: 5px 0;
    color: #333;
  }

  .button,
  .button:active,
  .button:focus {
    outline: 0;
  }

  &::before {
    content: "";
    position: absolute;
    top: -$dashboard-tab-current-marker-height;
    left: 10px;
    width: 0;
    height: 0;
    border-bottom: $dashboard-tab-current-marker-height solid #fff;
    border-left: $dashboard-tab-current-marker-height solid transparent;
    border-right: $dashboard-tab-current-marker-height solid transparent;
  }
}

.save-tab-order-message {
  font-weight: 600;
  margin-right: 30px;
}

.server-error-response {
  display: flex;
  align-items: center;

  .reason {
    display: inline-block;
  }
}

.personalization-update-failed {
  display: flex;

  .server-error-response {
    float: left;
  }
}

.tabs-list-dropdown-widget {
  margin: 0;
  padding: 0;
  display: none;
  flex-grow: 0;
  flex-shrink: 0;
  cursor: pointer;
  height: $dashboard-tab-height;
  width: $dashboard-tab-list-toggle-width;

  &.paged {
    display: block;
  }
}

.tabs-list {
  position: absolute;
  top: 100%;
  right: 30px;
  background: $dashboard-tab-bg;
  margin: 0;
  padding: 10px 20px;
  border-top: 1px solid $dashboard-tabs-border-color;
  border-radius: 0 0 $dashboard-tabs-border-radius $dashboard-tabs-border-radius;
  list-style: none;
  z-index: 9;
  overflow-y: auto;
  max-height: 65vh;
  box-shadow: 1px 5px 11px rgb(0, 0, 0, 21%);

  li {
    @include truncate-to-width($max: 210px);

    margin: 0;
    border: 0;
    border-bottom: 1px dashed $dashboard-tabs-border-color;
    text-transform: uppercase;
    font-size: 12px;
    padding: 10px 0;
    font-weight: 600;
    color: $dashboard-tab-name;

    &.current,
    &:hover {
      color: $dashboard-tab-name-current;
    }

    &:last-of-type {
      border-bottom: 0;
    }
  }
}

.tabs-list-dropdown-toggle {
  @extend %tab-buttons;

  color: $dashboard-tab-name;
  margin-left: -1px;
}

// icons

.icon_add {
  @include icon-before($type: plus);
}

.icon_page-prev {
  @include icon-before($type: chevron-left);
}

.icon_page-next {
  @include icon-before($type: chevron-right);
}

.icon_edit {
  cursor: pointer;
  color: $icon-color;
  display: none;

  @include icon-before($type: pencil);

  .current & {
    color: $go-primary;
    display: block;
  }
}

.icon_drag {
  @include sort-cursor;
  @include grip-icon;

  font-size: 12px;
  color: #9b9b9b;

  &:active {
    @include sort-cursor-active;
  }
}

.revert {
  position: absolute;
  right: 5px;
  top: 2px;
  cursor: pointer;

  @include icon-before($type: xmark);
}

.icon_alert {
  margin-right: 10px;
  font-size: 150%;
  color: map.get($foundation-palette, alert);

  @include icon-before($type: exclamation-circle);
}

.icon_tabs-list {
  font-size: 14px;

  @include icon-before($type: chevron-down);
}

.dropdown-btn {
  cursor: pointer;

  @include icon-before($type: caret-down);

  &.deny-action {
    cursor: not-allowed;
  }
}
